<template>
    <view class="container" style="padding-bottom: 400rpx;">
        <!-- 轮播图 -->

        <!-- 欢迎语 -->
        <view class="welcome-section">
            <view class="title">欢迎来到枣庄旅游</view>
            <view class="subtitle">探索精彩景点，开启美好旅程</view>
        </view>


        <!-- 功能导航 -->
        <view class="nav-section">
            <view class="nav-row">
                <view class="nav-item" @click="go('/pages/spots/list')">
                    <view class="nav-icon">
                        <image src="/static/images/景点门票.png" mode="aspectFit"></image>
                    </view>
                    <view class="nav-info">
                        <text class="nav-title">景点门票</text>
                        <text class="nav-desc">精选景点推荐</text>
                    </view>
                </view>
                <view class="nav-item" @click="go('/pages/guide/list')">
                    <view class="nav-icon">
                        <image src="/static/images/攻略.png" mode="aspectFit"></image>
                    </view>
                    <view class="nav-info">
                        <text class="nav-title">旅游攻略</text>
                        <text class="nav-desc">玩转景点攻略</text>
                    </view>
                </view>
            </view>
            <view class="nav-row">
                <view class="nav-item" @click="go('/pages/hotel/list')">
                    <view class="nav-icon">
                        <image src="/static/images/酒店.png" mode="aspectFit"></image>
                    </view>
                    <view class="nav-info">
                        <text class="nav-title">酒店住宿</text>
                        <text class="nav-desc">特惠酒店推荐</text>
                    </view>
                </view>
                <view class="nav-item" @click="go('/pages/user/user')">
                    <view class="nav-icon">
                        <image src="/static/images/w1.png" mode="aspectFit"></image>
                    </view>
                    <view class="nav-info">
                        <text class="nav-title">个人中心</text>
                        <text class="nav-desc">我的订单服务</text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 热门景点 -->
        <view class="section-title">热门景点</view>
        <view class="spot-list">
            <view class="spot-item" v-for="spot in spotList" :key="spot.spotId" @click="goToSpotDetail(spot.spotId)">
                <image v-if="spot.image" :src="IMAGE_BASE + spot.image" mode="scaleToFill"></image>
                <view class="spot-info">
                    <view class="spot-name">{{ spot.spotName }}</view>
                    <view class="spot-desc">{{ spot.description }}</view>
                    <view class="spot-price">
                        <text class="price">¥{{ spot.ticketPrice }}</text>
                        <text class="label">起</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { getHomeSpots } from '@/api/home.js'
import config from '../../api/config.js'

const BASE_API = config.admin_base_api
const IMAGE_BASE = config.image_base
export default {
    data () {
        return {
            imgList: [
                'https://ww4.sinaimg.cn/mw690/006Ynbnrly1hvaci0qa23j30vk0l0kj8.jpg'
            ],
            spotList: [],
            IMAGE_BASE
        }
    },
    onLoad () {
        this.getSpotList()
    },
    methods: {
        // 获取景点列表
        getSpotList () {
            getHomeSpots().then(res => {
                if (res.code === 200) {
                    this.spotList = res.data
                }
            })
        },
        // 跳转到景点详情
        goToSpotDetail (spotId) {
            uni.navigateTo({
                url: `/pages/spots/detail?id=${spotId}`
            })
        },
        // 页面跳转
        go (url) {
            let token = uni.getStorageSync('token')
            if (!token) {
                uni.showModal({
                    title: '提示',
                    content: '请先登录！',
                    success: function (res) {
                        if (res.confirm) {
                            uni.navigateTo({
                                url: '/pages/login/index'
                            })
                        }
                    }
                })
                return
            }
            uni.navigateTo({ url })
        }
    }
}
</script>

<style>
.container {
    padding: 20rpx;
}

.banner {
    width: 100%;
    height: 360rpx;
    margin-bottom: 20rpx;
}

.banner-image {
    width: 100%;
    height: 100%;
    border-radius: 16rpx;
}

swiper {
    border-radius: 16rpx;
    overflow: hidden;
    transform: translateY(0);
}

.welcome-section {
    padding: 40rpx 20rpx;
    text-align: center;
    background-color: #fff;
    margin: 20rpx 0;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.welcome-section .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
}

.welcome-section .subtitle {
    font-size: 28rpx;
    color: #666;
    margin-top: 10rpx;
}

.nav-section {
    background-color: #fff;
    border-radius: 16rpx;
    margin: 20rpx 0;
    padding: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.nav-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
}

.nav-row:last-child {
    margin-bottom: 0;
}

.nav-item {
    flex: 1;
    display: flex;
    align-items: center;
    background: #f8f9fc;
    padding: 20rpx;
    margin: 0 10rpx;
    border-radius: 12rpx;
    transition: all 0.3s;
}

.nav-item:active {
    background: #f0f2f7;
    transform: scale(0.98);
}

.nav-icon {
    width: 80rpx;
    height: 80rpx;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.nav-icon image {
    width: 50rpx;
    height: 50rpx;
}

.nav-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.nav-title {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 4rpx;
}

.nav-desc {
    font-size: 22rpx;
    color: #999;
}

.section-title {
    font-size: 32rpx;
    font-weight: bold;
    padding: 30rpx 0;
}

.spot-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
}

.spot-item {
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
}

.spot-item image {
    width: 100%;
    height: 300rpx;
}

.spot-info {
    padding: 20rpx;
}

.spot-name {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}

.spot-desc {
    font-size: 26rpx;
    color: #666;
    margin: 10rpx 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.spot-price {
    margin-top: 10rpx;
}

.spot-price .price {
    color: #f56c6c;
    font-size: 36rpx;
    font-weight: bold;
}

.spot-price .label {
    font-size: 24rpx;
    color: #999;
    margin-left: 4rpx;
}
</style>
